import React, { Component } from 'react'
import './LevelLinkTab.less'

import SellOnlineList from 'base/SellOnlineList/SellOnlineList'


export default class LevelLinkTab extends Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  listTitleClick = (item, index) => {
    // console.log(item)
    this.props.sellOnline.getLevelLinkTabMainId(item.id, item.subIds,  index)
  }

  contentTitleClick = (item, index) => {
    // console.log(item)
    this.props.sellOnline.getLevelLinkTabSubId(item.id, index)
  }

  componentDidMount() {
    console.log(this.props)
  }

  render() {
    return (
      <div className="level-link-tab">
        <div className="list-container">
          <div className="list-title">
            <ul className="list-wrapper">
              {
                this.props.mainTypeArr.map((val, key) => (
                  <li
                    key={key}
                    className={this.props.curListTitleIndex === key ? 'activeListTitle' : ''}
                    onClick={this.listTitleClick.bind(this, val, key)}
                  >
                    <span >{val.name}</span>
                  </li>
                ))
              }
            </ul>
          </div>
          <div className="list-content">
            <ul className="list-wrapper">
              {this.props.subTypeArr.map((val, key) => (
                <li key={key}
                  className={this.props.curContentTitleIndex === key ? 'activeContentTitle' : ''}
                  onClick={this.contentTitleClick.bind(this, val, key)}
                >{val.name}
                </li>
              ))}
            </ul>
            <SellOnlineList
              commodityList={this.props.commodityList}
              levelLinkTab={this}
            />
          </div>

        </div>
      </div>
    )
  }
}
